<template>
  <div class="step-3-container">
    <div class="metric-search">
      <span>指标类别：</span>
      <el-cascader
        class="cascader-block"
        size="small"
        :props="props"
        collapse-tags
        v-model="selectedMetricCategoryes"
        :options="metricOptions"
        @change="handleChange"
        clearable>
      </el-cascader>
      <el-tooltip content="若选择的运行方式是amap,则指标类别可跳过，直接点击发布作业" placement="top">
        <i class="iconfont icon-infofill" style="margin-left: 10px;"></i>
      </el-tooltip>
      
    </div>
    <div class="metric-content">
        <el-table
          :data="lists"
          tooltip-effect="dark"
          style="width: 100%"
          :border="true"
          :header-cell-class-name="headerCellClassName"
          :cell-class-name="cellClassName">
          <el-table-column
            v-for="(value, index) in columns"
            :label="value.name"
            :prop="value.prop"
            :key="index"
            :width="value.width"
          >
          </el-table-column> 
        </el-table>
         <!--分页--工具条-->
        <el-pagination
          background
          layout="total,sizes, prev, pager, next"
          :page-sizes="[20, 50, 100]"
          :page-size="20"
          :current-page.sync="pageIndex"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </div>
    <div class="btn-group">
      <el-button @click="previousStep" size="small" >上一步</el-button>
      <!-- <el-button @click="save" size="small">保存作业</el-button> -->
      <el-button @click="submit" size="small" type="primary">发布作业</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
  import debounce from 'lodash/debounce';
  import {fetchMetricCategory, fetchMetricList, fetchCustomGroupForMetric, fetchGroupMertic} from '@/api/metric';
  export default {
    data(){
      return {
        props: { multiple: true },
        metricOptions: [
          {
            label: '行车',
            value: 'driving',
            children: []
          },
          {
            label: '泊车',
            value: 'parking',
            children: []
          },
          {
            label: '自定义组',
            value: 'customGroup',
            children: []
          },
        ],
        checkedOption: [],
        selectedMetricCategoryes:[],
        firstOption:[],
        lists: [],
        columns:[
            {
              name: '指标名称',
              prop: 'metric_name',
              width: '300px'
            },
            {
              name: '类别',
              prop: 'category',
              width: '150px'
            },
            {
              name: '子类别',
              prop: 'sub_category',
              width: '150px'
            },
            {
              name: '描述',
              prop: 'des',
              width: ''
            },
          ],
          total: 0,
          pageIndex: 1,
          pageSize: 20,
          customGroups: []
      }
    },
    computed: {
      ...mapGetters(['createCaseForms']),
    },
    created(){
      this.getCatogry()
      this.getCustomGroup()
    },
    methods:{
      cellClassName(){
        return 'body-cell-custom'
      },
      headerCellClassName(){
        return 'header-cell-custom'
      },
      // 获取左侧的自定义组列表
      getCustomGroup(){
        fetchCustomGroupForMetric().then(res => {
          this.customGroups = res.data
          let index = this.metricOptions.findIndex(element => element.value === 'customGroup')
          this.customGroups.forEach(item => {
            this.metricOptions[index].children.push({label: item.name,value: item.id})
          })
        })
      },
      // 获取metric类别，组装数据
      getCatogry(){
        const sceneArr = ['driving', 'parking']
        sceneArr.map(sceneVal => {
          fetchMetricCategory({scene: sceneVal}).then(res => {
            if(res.category && res.category.length>0){
              let result = res.category
              let index = this.metricOptions.findIndex(element => element.value === sceneVal)
              result.forEach(element => {
              this.metricOptions[index].children.push({label: element, value:element})
              })
              if(index === 0){
                this.firstOption = ['driving', res.category[0]]
                this.checkedOption = this.firstOption
                 this.getList()
              }     
            }
        })
        })
      },
      // 获取自定义组 的列表 
      getCustomList(){
        // 点击自定义组 的获取 metric 
        const groupParams = {
          page_num: this.pageIndex,
          page_size: this.pageSize,
          group_id: this.checkedOption[1]
        }
        fetchGroupMertic(groupParams).then(res => {
          if(res && res.data){
            this.lists = res.data
            this.total = res.total
          }
        })
      },
      //获取metric列表
      getList(pageParams){
        const params = pageParams || {
          scene: this.checkedOption[0],
          sub_category: this.checkedOption[1],
          page_num: this.pageIndex,
          page_size: this.pageSize
        } 
        fetchMetricList(params).then(res => {
          if(res && res.data){
            this.lists = res.data
            this.total = res.total
          }
        })
      },
      // 切换pagesize
      handleSizeChange(val) {
        this.pageSize = val;
        if(this.checkedOption[0] === 'customGroup'){
          this.getCustomList()
        }else {
          this.getList()
        }
      },
      // 切换页码
      handleCurrentChange(val) {
        this.pageIndex = val
        if(this.checkedOption[0] === 'customGroup'){
          this.getCustomList()
        }else {
          this.getList()
        }
        
      },
      handleChange(value) {
        this.pageIndex = 1
        this.pageSize = 20
        this.checkedOption = value && value.length > 0 ? value[value.length-1] : this.firstOption
        this.selectedMetricCategoryes = value
        this.$store.dispatch('case/setSelectedMetricCategory', this.selectedMetricCategoryes)
        if(this.checkedOption[0] === 'customGroup'){
          this.getCustomList()
        }else {
          this.getList()
        }
      },
      previousStep(){
        this.$emit('previousStep')
      },
      submit: debounce(function(){
        if(this.createCaseForms.sim_type !== 'amap' && this.createCaseForms.sim_type !== 'amap_traffic' && this.selectedMetricCategoryes.length <1){
          this.$message.warning('请选择评测指标类别！')
          return
        }
        this.$emit('submit')
      },1000),
      save(){
        this.$emit('save')
      }
    }
  }
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss';
.step-3-container{
    .btn-group{
      margin: 0 0 20px 30px;
    }
   
    .metric-content{
      margin: 10px 30px 10px;
    }
    .metric-search{
      height: 80px;
      margin: 0 30px;
      display: flex;
      align-items: center;
      >span {
        color: #606266;     
      }
    }
}
</style>